<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>emmet语法</title>
  </head>
  <body>
    <!--emmet语法-->
    <!--练习  
    div#box>p.(ul.list>li.child${嘎嘎起飞}*3)^dv.box2
    -->
    <div id="box">
      <p class=""></p>
      <ul class="list">
        <li class="child1">嘎嘎起飞</li>
        <li class="child2">嘎嘎起飞</li>
        <li class="child3">嘎嘎起飞</li>
      </ul>
    </div>
    <dv class="box2"></dv>
    
    <!--div#woshiid
    生成带id的某个元素
    -->
    <div id="wshiid"></div>
    <p id="woship"></p>
    <span id="test"></span>
    <!--
        span.demo
    -->
    <div class="demo"></div>
    <span class="demo"></span>

    <!--
        子节点:>
        兄弟节点:+
        上级节点:^
        div.father+p.uncle+ul.anut
        div>ul>li^div
    -->
    <div class="father"></div>
    <p class="uncle"></p>
    <ul class="anut"></ul>

    <!--分组
      div>(ul>li>a)+div>p
    -->

    <!--属性[]
    a[href="http://www.baidu.com" name="baidu"]
    -->
    <a href="http://www.baidu.com" name="baiduy"></a>

    <!--内容{}
    ul>li{嘎嘎鸭}*3
    -->
    <ul>
      <li>嘎嘎鸭</li>
      <li>嘎嘎鸭</li>
      <li>嘎嘎鸭</li>
    </ul>

    <!--编号：$
    ul>li.test${$}*5
    -->
    <ul>
      <li class="test1">1</li>
      <li class="test2">2</li>
      <li class="test3">3</li>
      <li class="test4">4</li>
      <li class="test5">5</li>
    </ul>

    <!--自定义开始编号$@+数字*数字
    ul>li.test$@3*5
    -->
    <ul>
      <li class="test3"></li>
      <li class="test4"></li>
      <li class="test5"></li>
      <li class="test6"></li>
      <li class="test7"></li>
    </ul>
  </body>
</html>
